<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<dom-module id="todo-form">
  <template>
    <style>
      :host{
        display: block;
      }
    </style>
    <input name="content" id="todoInput">
    <button on-click="addTodo" >添加</button>
  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class TodoForm extends Polymer.Element {
      constructor(){
        super();
      }
      static get is() { return 'todo-form'; }
      static get properties() { 
      }
      addTodo(){
        const content = this.$.todoInput.value;
        this.dispatchEvent(new CustomEvent('add-todo',{detail:{content:content}}));
        this.$.todoInput.value = "";
      }
    }

    window.customElements.define(TodoForm.is, TodoForm);
  </script>
</dom-module>
